<!--JS实现导航条效果-->
<html>
<head>
	<meta charset="UTF-8">
	<title>JS实现导航条效果</title>
<style type="text/css">
ul{
	border: 1px solid red;
}
ul li{
  border: 1px solid green;
}
div{		
	position: absolute;
	margin-left: 10px;
	border: 1px solid goldenrod;
	z-index: 100;
}
</style>
</head>

<body>
<ul id="nav">
	<li onmouseover="memeda()">首页</li>
	<li>产品管理
	    <div id="sonnav1">
	    	<a href="">a-111</a><br />
	    	<a href="">a-222</a><br />
	    	<a href="">a-333</a><br />
	    </div>
	</li>
	<li>新闻案例
		<div id="sonnav2">
	    	<a href="">b-111</a><br />
	    	<a href="">b-222</a><br />
	    	<a href="">b-333</a><br />
	    </div>
	</li>
	<li>练习我们
		<div id="sonnav3">
	    	<a href="">c-111</a><br />
	    	<a href="">c-222</a><br />
	    	<a href="">c-333</a><br />
	    </div>
	</li>
</ul>
</body>

<script type="text/javascript">
var ul = document.getElementById("nav");
ul.style.listStyle="none";
var li = document.getElementsByTagName("li");
for(var i=0 ;i<li.length;i++){
 	li[i].style.float="left";
 	li[i].style.marginLeft="100px";
 	if(i==1){
 		li[i].onmouseover=function(){
 			var div = document.getElementById("sonnav1");
 			div.style.display="block";
 		}
 		li[i].onmouseout=function(){
 			var div = document.getElementById("sonnav1");
 			div.style.display="none";
 		}
 	}else if(i==2){
 		li[i].onmouseover=function(){
 			var div = document.getElementById("sonnav2");
 			div.style.display="block";
 		}
 		li[i].onmouseout=function(){
 			var div = document.getElementById("sonnav2");
 			div.style.display="none";
 		}
 	}else if(i==3){
 		li[i].onmouseover=function(){
 			var div = document.getElementById("sonnav3");
 			div.style.display="block";
 		}
 		li[i].onmouseout=function(){
 			var div = document.getElementById("sonnav3");
 			div.style.display="none";
 		}
 	}
}

ul.style.overflow="hidden";
var divlist= document.getElementsByTagName("div");
for(var i=0;i<divlist.length;i++){
 	divlist[i].style.display="none";
}

function memeda(){
	alert(111);
}
</script>
</html>